<template>
  <div class="lottie-con">
    <div class="lottie-box">
      <lottie
        :options="defaultOptions"
        :height="750"
        :width="750"
        v-on:animCreated="handleAnimation"
      />
      <div class="lottie-bottom">
        <span class="lottie-text">+5</span>
        <span @click="addShopCart">开始</span>
        <!-- <img class="lottie-img" src="./img/star-normal.png"/> -->
      </div>
      <div class="lottie_cart">
        <transition name="lottie_cart">
            <img class="add_img" v-if="addShow" src="./img/star-normal.png" alt="">
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
import animationData from "../../../static/lottie/data.json";

export default {
  data() {
    return {
      defaultOptions: { animationData: animationData },
      animationSpeed: 1,
      anim: {},
      addShow: false,
    };
  },
  methods: {
    addShopCart () {
        this.addShow = true
        setTimeout(() => {
          this.addShow = false
        }, 1000)
    },
    handleAnimation: function (anim) {
      this.anim = anim;
      console.log(anim); //这里可以看到 lottie 对象的全部属性
    },
  },
};
</script>
<style lang="stylus" scoped>
.lottie-con {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.8);
  .lottie-box{
      position:relative
  }
  .lottie-bottom {
    position:absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    left:50%;
    transform translateX(-50%)
    bottom:20%;
    .lottie-img{
        width 51px;
        height 54px;
        margin-left 15px;
    }
    .lottie-text {
      font-size: 34px;
      font-weight: 800;
      color: #fff;

      &:first-letter {
        font-size: 28px;
      }
    }
  }
}
//动画css
  .lottie_cart {
    width 51px;
      height 54px;
      position: absolute;
      right: 20px;
      top: 20px;
  }
  .lottie_cart .add_img {
      width 51px;
      height 54px;
    }
  /* CSS类名实现 */
  .lottie_cart-enter-active {
    transition: all 0.3s cubic-bezier(.55,.41,.83,.67);
  }
  .lottie_cart-enter {
    opacity: 0.6;
    transform: translate(-810px, 500px);
  }
  .transition-delay1{
    transition-delay: 0.1s;
  }
  .transition-delay1{
    transition-delay: 0.2s;
  }
  .transition-delay1{
    transition-delay: 0.3s;
  }

</style>
